import { GetProps, Radio } from 'antd'
import { CustomCellEditorProps } from '@ag-grid-community/react'

import styles from './styles.module.less'

type TRadioGroupProps = GetProps<typeof Radio.Group> & { placeholder?: string }

interface IRadioGroupCellEditorProps extends CustomCellEditorProps<any, string | number> {
  /** 为了与现有 config.tsx 的使用保持一致，沿用 selectProps 命名 */
  radioGroupProps?: Omit<TRadioGroupProps, 'value' | 'onChange'>
}

export const RadioGroupCellEditor = Object.assign(
  ({ api, value, onValueChange, radioGroupProps }: IRadioGroupCellEditorProps) => {
    return (
      <Radio.Group
        {...radioGroupProps}
        className={styles.RadioGroupCellEditor}
        style={{ width: '100%', ...(radioGroupProps?.style || {}) }}
        value={value as any}
        options={radioGroupProps?.options}
        onChange={e => {
          onValueChange(e.target.value as any)
          // 单选选择完成后立即结束编辑
          api.stopEditing()
        }}
      />
    )
  },
  {
    defineProps: (
      props: Pick<IRadioGroupCellEditorProps, 'radioGroupProps'>,
    ): Pick<IRadioGroupCellEditorProps, 'radioGroupProps'> => props,
  },
)
